<template>
    <div class="knowledge-library">
        <div class="header">
            <div>知识库</div>
            <div class="search-filter">
                <el-select v-model="filterType" placeholder="全部" class="filter-select">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="通用型" value="general"></el-option>
                    <el-option label="Web站点" value="website"></el-option>
                </el-select>
                <el-input v-model="searchQuery" placeholder="按名称搜索" class="search-input" prefix-icon="el-icon-search">
                </el-input>
            </div>
        </div>

        <div class="library-container">
            <div class="create-library-card" @click="showCreateDialog">
                <el-icon>
                    <Plus />
                </el-icon>
                <span>创建知识库</span>
            </div>

            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="8" v-for="(library, index) in filteredLibraries" :key="index">
                    <div class="library-card">
                        <div class="library-header">
                            <div class="library-icon">
                                <img :src="getIcon(library.type)" alt="知识库图标">
                            </div>
                            <div class="library-title">
                                {{ library.name }}
                                <div class="library-creator">创建者: {{ library.creator }}</div>
                            </div>
                            <el-tag :type="getTagType(library.type)" size="small" class="library-type-tag">
                                {{ library.type === 'general' ? '通用型' : 'web 站点' }}
                            </el-tag>
                        </div>
                        <div class="library-description">{{ library.description }}</div>
                        <div class="library-stats">
                            <span>{{ library.docCount }} 文档数</span>
                            <span>{{ library.charCount }} 字符</span>
                            <span>{{ library.appCount }} 关联应用</span>
                        </div>
                        <el-button icon="el-icon-more" circle plain class="more-btn"
                            @click.stop="showMoreOptions(library)">
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog title="创建知识库" v-model="createDialogVisible" width="30%">
            <el-form :model="newLibrary">
                <el-form-item label="知识库名称">
                    <el-input v-model="newLibrary.name"></el-input>
                </el-form-item>
                <el-form-item label="知识库类型">
                    <el-select v-model="newLibrary.type">
                        <el-option label="通用型" value="general"></el-option>
                        <el-option label="web 站点" value="website"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="newLibrary.description"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="createDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="createLibrary">创建</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'KnowledgeLibrary',
    data () {
        return {
            filterType: '',
            searchQuery: '',
            createDialogVisible: false,
            newLibrary: {
                name: '',
                type: 'general',
                description: ''
            },
            libraries: [
                {
                    id: 1,
                    name: '测试多文档上传',
                    type: 'general',
                    creator: 'admin',
                    description: '测试多文档上传',
                    docCount: 3,
                    charCount: '5.9k',
                    appCount: 0
                },
                {
                    id: 2,
                    name: 'MaxKB站点',
                    type: 'website',
                    creator: 'admin',
                    description: 'MaxKB站点',
                    docCount: 1,
                    charCount: '0',
                    appCount: 0
                },
                {
                    id: 3,
                    name: '赛力斯产品知识库',
                    type: 'general',
                    creator: 'admin',
                    description: '赛力斯产品知识库',
                    docCount: 3,
                    charCount: '6.0k',
                    appCount: 2
                }
            ]
        };
    },
    computed: {
        filteredLibraries () {
            let filtered = this.libraries;

            // 按类型筛选
            if (this.filterType) {
                filtered = filtered.filter(library => library.type === this.filterType);
            }

            // 按名称搜索
            if (this.searchQuery) {
                filtered = filtered.filter(library =>
                    library.name.includes(this.searchQuery)
                );
            }

            return filtered;
        }
    },
    methods: {
        showCreateDialog () {
            this.createDialogVisible = true;
        },
        createLibrary () {
            if (!this.newLibrary.name) {
                this.$message.error('请输入知识库名称');
                return;
            }

            const newId = this.libraries.length + 1;
            this.libraries.push({
                id: newId,
                name: this.newLibrary.name,
                type: this.newLibrary.type,
                creator: 'admin',
                description: this.newLibrary.description,
                docCount: 0,
                charCount: '0',
                appCount: 0
            });

            this.createDialogVisible = false;
            this.newLibrary = {
                name: '',
                type: 'general',
                description: ''
            };

            this.$message.success('知识库创建成功');
        },
        showMoreOptions (library) {
            this.$alert(`更多操作：${library.name}`, '提示', {
                confirmButtonText: '确定'
            });
        },
        getIcon (type) {
            // 返回不同类型的图标路径
            return type === 'general' ? require('@/assets/icons/png/icon_document.png') : require('@/assets/icons/png/icon_document.png')
        },
        getTagType (type) {
            // 根据类型返回不同的标签样式
            return type === 'general' ? 'info' : 'warning';
        }
    }
}
</script>

<style scoped>
.knowledge-library {
    padding: 10px;
    background-color: #f5f7fa;
    min-height: 100vh;
    font-size: 16px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.search-filter {
    display: flex;
    align-items: center;
}

.filter-select {
    margin-right: 10px;
    width: 120px;
}

.search-input {
    width: 250px;
}

.library-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.create-library-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 150px;
    border: 2px dashed #dcdfe6;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px;
}

.create-library-card:hover {
    border-color: #409eff;
    color: #409eff;
}

.create-library-card i {
    font-size: 30px;
    margin-bottom: 10px;
}

.library-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    width: 350px;
    height: 150px;
}

.library-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.library-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;
    background-color: #3370ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.library-icon img {
    width: 24px;
    height: 24px;
}

.library-title {
    flex: 1;
    font-size: 12px;
}

.library-type-tag {
    position: absolute;
    top: 10px;
    right: 10px;
}

.library-creator {
    color: #999;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.library-description {
    color: #666;
    margin-bottom: 15px;
    font-size: 12px;
    line-height: 1.4;
    height: 36px;
}

.library-stats {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 12px;
    margin-top: 10px;
    width: 240px;
}

.more-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px;
}
</style>